<template>
    <div class="login-wrap">
        <div class="login-container">
            <div class="login-title-box">
                <div class="mx-title">管理后台系统</div>
                <div class="mx-title-lab"></div>
            </div>
            <div class="login-content">
                    <div class="mx-login">
                        <div class="login-lab">登录</div>
                    </div>
                    <div class="mx-login-cen">
                        <el-form  :model="ruleForm" ref="ruleForm"  :rules="rules" label-width="0px">
                            <el-form-item>
                                <el-select v-model="value" placeholder="请选择系统类型" style="width: 366px;">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="username">
                                <el-input v-model="ruleForm.username" placeholder="请输入账号">
                                    <i slot="prefix" class="icon iconfont icon-zhanghu1"></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" @keyup.enter.native="submitForm('ruleForm')">
                                    <i slot="prefix" class="icon iconfont icon-ai-password"></i>
                                </el-input>
                            </el-form-item>
                            <div class="login-btn">
                                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                            </div>
                        </el-form>
                    </div>
            </div>
        </div>
        
    </div>
</template>

<script>
    import Cookies from 'js-cookie';
    export default {
        data: function(){
            return {
                ruleForm:{
                    username:'',
                    password:''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                },
                value:'2',
                options: [{
                        value: '2',
                        label: '分站系统'
                    },{
                        value: '1',
                        label: '总站系统'
                }]
            }
        },
        created(){
            //清除cookie 存储的信息
            //Cookies.remove('sidebarStatus', { path: '' });
        },
        mounted (){
            //this.getUserInfo();       
        },
        methods: {
            submitForm(formName) {
                var _this = this;
                this.$refs[formName].validate((valid) => {
                    //输入账号和密码之后，去请求接口校验账号密码是否正确,账户和密码都有值了valid为true。
                    if (valid) {
                        //单系统
                        // localStorage.setItem('ms_username',_this.ruleForm.username);
                        // _this.$router.push('/');
                        //多系统
                        if(this.value==2||this.value=="2"){
                            //分站
                            this.getBranchUserInfo();
                        }else{
                            //总站
                            this.getUserInfo();
                        }
                        
                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });
            },
            getUserInfo (){
                var _this =this;
                const querystring = require('querystring');
                const param ={
                    userName:this.ruleForm.username,
                    pwd:this.ruleForm.password
                }
                this.$axios.post('/manage/admin/login',querystring.stringify(param)).then(response=>{
                    // console.log(response);
                    if(response.data.code==200){
                        var data = response.data.data;//获取用户信息
                        //设置cookie过期和保存用户信息在vuex中
                        var  obj ={};
                        obj.admin_id = data.admin_id;
                        obj.real_name = data.real_name;
                        obj.user_name = data.user_name;
                        obj.branch=false;
                        _this.$store.dispatch("handleUserInfo",obj).then(()=>{
                            //响应成功之后，做相关操作
                            _this.$message({
                                message:'登录成功',
                                duration:2000,
                                type:"success",
                                onClose:function(){
                                    _this.$router.push('/boss');
                                }
                            });

                        }).catch(()=>{
                            //响应失败
                            _this.$notify.error({title: '登录失败',message: '失败原因：异常'});
                        })

                        
                    }else{
                        _this.$notify.error({
                            title: '登录失败',
                            duration:2000,
                            message: '失败原因：'+response.data.msg
                        });
                    }
                    
                }).catch(error=>{
                   console.log(error); 
                });
            },
            getBranchUserInfo(){
                var _this =this;
                const querystring = require('querystring');
                const param ={
                    userName:this.ruleForm.username,
                    pwd:this.ruleForm.password
                }
                this.$axios.post('/manage/substation/login',querystring.stringify(param)).then(response=>{
                    // console.log(response);
                    if(response.data.code==200){
                        var data = response.data.data;//获取用户信息
                        var  obj ={};
                        obj.account_id = data.account_id;
                        obj.city_id = data.city_id;
                        obj.mobile = data.mobile;
                        obj.nick_name = data.nick_name;
                        obj.user_name = data.user_name;
                        obj.branch=true;
                        //设置cookie过期和保存用户信息在vuex中
                        _this.$store.dispatch("handleUserInfo",obj).then(()=>{
                            //响应成功之后，做相关操作
                            _this.$message({
                                message:'登录成功',
                                duration:2000,
                                type:"success",
                                onClose:function(){
                                    _this.$router.push('/staff');
                                }
                            });

                        }).catch(()=>{
                            //响应失败
                            _this.$notify.error({title: '登录失败',message: '失败原因：异常'});
                        })

                        
                    }else{
                        _this.$notify.error({
                            title: '登录失败',
                            duration:2000,
                            message: '失败原因：'+response.data.msg
                        });
                    }
                    
                }).catch(error=>{
                   console.log(error); 
                });
            },
            getDemo (){

            }
        }
        
    }
</script>
<style lang="stylus" scoped>
    .mx-title{
        -ms-flex: 1 1;
        flex: 1 1;
        padding: 112px 0 24px;
        text-align :center
    }
    .mx-title-lab{
        text-align:center;
        font-size: 14px;
        color: rgba(0,0,0,.45);
        margin-top: 12px;
        margin-bottom: 40px;
    }
    .login-title-box{
        .mx-title{
            font-size: 33px;
            color: rgba(0,0,0,.85);
            font-family: "Myriad Pro","Helvetica Neue",Arial,Helvetica,sans-serif;
            font-weight: 600;
        }
    }
    .login-content{
        width: 368px;
        margin: 0 auto;
        .mx-login{
            .login-lab{
                text-align:center;
                height: 100%;
                margin: 0 0px 30px 0;
                padding: 12px 16px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                position: relative;
                -webkit-transition: color .3s cubic-bezier(.645,.045,.355,1);
                transition: color .3s cubic-bezier(.645,.045,.355,1);
                cursor: pointer;
                text-decoration: none;
                font-size: 16px;
                line-height: 24px;
                color: #1890ff;
                font-weight: 500;
            }
        }
        .mx-login-cen{
            .login-btn{
                .el-button{
                    width :100%;
                    display :block;
                    color: #fff;
                    background-color: #1890ff;
                    border-color: #1890ff;
                }
            }
            
        }
    }
    .login-btn{}
</style>